<template>
    <div class="app-container">
        <div class="query-from">
            <el-form :inline="true"  label-width="120" :model="queryParamsOf${entity.functionName}" class="demo-form-inline">
        <#list filedList as filed>
            <#if "${filed.exist}"=="1" >

                        <#if "${filed.dateFiled}"=="1">
                            <#elseif "${filed.haveId}" == "1">
                                <el-form-item label="${filed.comment}" props="${filed.name}">
                                 <el-select v-model="queryParamsOf${entity.functionName}.${filed.name}" value-on-clear class="inputClass">
                                        <el-option v-for="item in ${filed.name}s"  :key="item.id"  :label="item.name"  :value="item.id"  />
                                    </el-select>
                                </el-form-item>
                            <#else>
                            <el-form-item label="${filed.comment}" props="${filed.name}">
                                 <el-input class="inputClass" v-model="queryParamsOf${entity.functionName}.${filed.name}" placeholder="请输入${filed.comment}" clearable  @keyup.enter="handleQueryOf${entity.functionName}" />
                            </el-form-item>
                        </#if>
                      <#elseif "${filed.exist}"=="2">
                          <#if "${filed.startFileNameVal}"=="1">
                                 <el-form-item label="${filed.comment}" props="plateType" style="width: 480px">
                                     <el-date-picker v-model="${filed.fileName}s" type="daterange" start-placeholder="请选择${filed.comment}的开始时间"
                                                     end-placeholder="请选择${filed.comment}的结束时间" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                                                     @change="query${filed.fileName}()"/>
                                 </el-form-item>
                          </#if>
                      </#if>

        </#list>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQueryOf${entity.functionName}">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQueryOf${entity.functionName}">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                <#if "${entity.isAuthorityURL}" == "1">
                    <el-button type="primary" plain icon="Plus" @click="handleAddOf${entity.functionName}"  v-hasPermi="['${entity.authorityURL}:add']">新增</el-button>
                    <#else>
                        <el-button type="primary" plain icon="Plus" @click="handleAddOf${entity.functionName}" >新增</el-button>
                </#if>

                </el-col>
                <el-col :span="1.5">
                <#if "${entity.isAuthorityURL}" == "1">
                    <el-button type="success" plain icon="Edit" :disabled="single${entity.functionName}" @click="handleUpdateOf${entity.functionName}"  v-hasPermi="['${entity.authorityURL}:update']">修改</el-button>
                <#else>
                    <el-button type="success" plain icon="Edit" :disabled="single${entity.functionName}" @click="handleUpdateOf${entity.functionName}"  >修改</el-button>
                </#if>
                </el-col>


                <el-col :span="1.5">
                <#if "${entity.isAuthorityURL}" == "1">
                    <el-button type="danger" plain icon="Delete" :disabled=multiple${entity.functionName} @click="handleDeleteOf${entity.functionName}"  v-hasPermi="['${entity.authorityURL}:del']">删除</el-button>
                <#else>
                    <el-button type="danger" plain icon="Delete" :disabled=multiple${entity.functionName} @click="handleDeleteOf${entity.functionName}"  >删除</el-button>
                </#if>

                </el-col>
                <el-col :span="1.5">
                <#if "${entity.isAuthorityURL}" == "1">
                    <el-button type="warning" plain icon="Download" @click="handleExportOf${entity.functionName}"  v-hasPermi="['${entity.authorityURL}:export']">导出</el-button>
                <#else>
                    <el-button type="warning" plain icon="Download" @click="handleExportOf${entity.functionName}" >导出</el-button>
                </#if>

                </el-col>
                <right-toolbar v-model:showSearch="showSearchOf${entity.functionName}" @queryTable="getListOf${entity.functionName}"></right-toolbar>
            </el-row>

        </div>

        <el-table v-loading="loadingOf${entity.functionName}" :data="listOf${entity.functionName}" @selection-change="handleSelectionChangeOf${entity.functionName}" border
                  :default-expand-all="false" :row-class-name="tableRowClassName" @sort-change="sortChangeOf${entity.functionName}">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" type="index" width="60" align="center">
                <template #default="scope">
                    {{ (queryParamsOf${entity.functionName}.pageNum - 1) * queryParamsOf${entity.functionName}.pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>

            <#list filedList as filed>
                 <#if "${filed.exist}"=="1" >
                     <el-table-column label="${filed.comment}" align="center" prop="${filed.name}" sortable />
                 </#if>
            </#list>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="160">
                <template #default="scope">
                <#if "${entity.isAuthorityURL}" == "1">
                    <el-button type="success" plain icon="Edit" :disabled="single${entity.functionName}" @click="handleUpdateOf${entity.functionName}(scope.row)"  v-hasPermi="['${entity.authorityURL}:update']">修改</el-button>
                <#else>
                    <el-button type="success" plain icon="Edit" :disabled="single${entity.functionName}" @click="handleUpdateOf${entity.functionName}(scope.row)"  >修改</el-button>
                </#if>

                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="totalOf${entity.functionName} > 0" :total="totalOf${entity.functionName}" v-model:page="queryParamsOf${entity.functionName}.pageNum" v-model:limit="queryParamsOf${entity.functionName}.pageSize"
                    @pagination="getListOf${entity.functionName}"  :page-sizes="pageSizesOf${entity.functionName}"/>

        <el-dialog :title="titleOf${entity.functionName}" v-model="openOf${entity.functionName}" width="500px" append-to-body>
            <el-form  :model="formOf${entity.functionName}" ref="rulesOf${entity.functionName}" label-width="80px"   :rules="checkRulesOf${entity.functionName}">
                <view style="display: grid;grid-template-columns: 99%">
           <#list filedList as filed>
                <el-form-item label="${filed.comment}" prop="${filed.name}">
                    <#if "${filed.exist}"=="1">
                        <#if "${filed.haveId}" == "1">
                            <el-select v-model="formOf${entity.functionName}.${filed.name}" value-on-clear >
                                <el-option v-for="item in ${filed.name}s"  :key="item.id"  :label="item.name"  :value="item.id"  />
                            </el-select>
                            <#else>
                        <el-input el-input="input" v-model="formOf${entity.functionName}.${filed.name}" placeholder="请输入${filed.comment}" clearable/>
                        </#if>
                    </#if>
                </el-form-item>
           </#list>
           </view>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFormOf${entity.functionName}">确 定</el-button>
                    <el-button @click="cancelOf${entity.functionName}">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>


<script setup name="${entity.functionName}">
    import { getDicts,getDictsDelFlag,dictLabelOfDictTypeAndDictValue,isEmpty } from '@/api/system/dict/data';
    import { listLimitOf${entity.functionName}, viewOf${entity.functionName}, addOf${entity.functionName}, updateOf${entity.functionName},updateStatusOf${entity.functionName},deleteOf${entity.functionName} } from "@/api/${entity.resourceName}/${entity.resourceName}";
    const { proxy } = getCurrentInstance();

    const listOf${entity.functionName} = ref([]);
    const openOf${entity.functionName} = ref(false);
    const titleOf${entity.functionName} = ref("");
    const loadingOf${entity.functionName} = ref(true);
    const showSearchOf${entity.functionName} = ref(true);
    const idsOf${entity.functionName} = ref([]);
    const single${entity.functionName} = ref(true);
    const multiple${entity.functionName} = ref(true);


    const pageOf${entity.functionName} = ref(1) //第几页
    const sizeOf${entity.functionName} = ref(10) //一页多少条
    const totalOf${entity.functionName} = ref(0);
    const pageSizesOf${entity.functionName} = [5, 10, 20, 50]; //每页显示多少条
    const currentPageOf${entity.functionName} = ref(1) // 当前页
    const globalRowOf${entity.functionName} = ref(null) // 当前行数据

    const changeFlagOf${entity.functionName} = ref(true)
    const deleteFlagsOf${entity.functionName} = ref([])
    <#list filedList as filed>
        <#if "${filed.exist}"=="2">
            <#if "${filed.startFileNameVal}"=="1">
                const  ${filed.fileName}s = ref([]);
            </#if>
        </#if>
    </#list>
    <#list selectFile as f>
    const ${f}s=ref([]);
    </#list>

    const dataOf${entity.functionName} = reactive({
        formOf${entity.functionName}: {},
        queryParamsOf${entity.functionName}: {
            pageNum: 1,
            pageSize: 10,
            <#list filedList as filed>
            ${filed.name} : null,
            </#list>

        },
        checkRulesOf${entity.functionName}: {
            <#list filedList as filed>
            ${filed.name} : [
                { required: true, message: "${filed.comment}  不能为空", trigger: "blur" }
            ],
            </#list>
        }
    });

    const { queryParamsOf${entity.functionName}, formOf${entity.functionName}, checkRulesOf${entity.functionName} } = toRefs(dataOf${entity.functionName} );

    <#list filedList as filed>
        <#if "${filed.exist}"=="2">
            <#if "${filed.startFileNameVal}"=="1">
                function query${filed.fileName}() {
                    queryParamsOf${entity.functionName}.value.${filed.startFiledName} = null;
                    queryParamsOf${entity.functionName}.value.${filed.name} = null;
                    if (${filed.fileName}s.value) {
                        let len = ${filed.fileName}s.value.length;
                        if (len > 0) {
                            queryParamsOf${entity.functionName}.value.${filed.startFiledName} = ${filed.fileName}s.value[0]
                        }
                        if (len > 1) {
                            queryParamsOf${entity.functionName}.value.${filed.name} = ${filed.fileName}s.value[1]
                        }
                    }
                }
            </#if>
        </#if>
    </#list>

    /** 查询设备信息列表 */
    function getListOf${entity.functionName}() {
        loadingOf${entity.functionName}.value = true;
        listLimitOf${entity.functionName}(queryParamsOf${entity.functionName}.value,queryParamsOf${entity.functionName}.value.pageNum,queryParamsOf${entity.functionName}.value.pageSize).then(response => {
            listOf${entity.functionName}.value = response.records;
            totalOf${entity.functionName}.value = response.total;
            formatTableList();
           // deleteFlagsOf${entity.functionName}Function(function (){
                loadingOf${entity.functionName}.value = false;
           // })
        }).catch(error=>{loadingOf${entity.functionName}.value = false});
    }

    function formatTableList(){
        let length = listOf${entity.functionName}.value.length;
        for (let i = 0; i < length; i++) {

        }
    }


    function deleteFlagsOf${entity.functionName}Function(fun){
        getDictsDelFlag().then(response=>{
            deleteFlagsOf${entity.functionName}.value =  response.data;


            if(fun){
                fun(response);
            }
        });
    }
    /**排序*/
    function sortChangeOf${entity.functionName}(data){
        queryParamsOf${entity.functionName}.value.order=data.order;
        queryParamsOf${entity.functionName}.value.prop=data.prop;
        getListOf${entity.functionName}();
    }

    // 取消按钮
    function cancelOf${entity.functionName}() {
        openOf${entity.functionName}.value = false;
        globalRowOf${entity.functionName}.value = null
        resetOf${entity.functionName}();
    }

    const handleSizeChange = (val) => {
        sizeOf${entity.functionName}.value = val;
    }
    const handleCurrentChange = (val) => {
        pageOf${entity.functionName}.value = val;
    }


    // 表单重置
    function resetOf${entity.functionName}() {
        formOf${entity.functionName}.value = {
            <#list filedList as filed>
            ${filed.name}  : null,
            </#list>
        };
        proxy.resetForm("rulesOf${entity.functionName}");
    }

    /** 搜索按钮操作 */
    function handleQueryOf${entity.functionName}() {
        queryParamsOf${entity.functionName}.value.pageNum = 1;
        getListOf${entity.functionName}();
    }

    /** 重置按钮操作 */
    function resetQueryOf${entity.functionName}() {
        proxy.resetForm("queryOf${entity.functionName}");
        <#list filedList as filed>
            <#if "${filed.exist}"=="2">
                <#if "${filed.startFileNameVal}"=="1">
                ${filed.fileName}s.value=null;
                 query${filed.fileName}();
                </#if>
            </#if>
        </#list>

        handleQueryOf${entity.functionName}();
    }



    // 多选框选中数据
    function handleSelectionChangeOf${entity.functionName}(selection) {
        idsOf${entity.functionName}.value = selection.map(item => item.${idFiled});
        single${entity.functionName}.value = selection.length != 1;
        multiple${entity.functionName}.value = !selection.length;
    }

    /** 新增按钮操作 */
    function handleAddOf${entity.functionName}() {
        resetOf${entity.functionName}();
        changeFlagOf${entity.functionName}.value = true;
        openOf${entity.functionName}.value = true;
        titleOf${entity.functionName}.value = "添加";
    }

    /** 修改按钮操作 */
    function handleUpdateOf${entity.functionName}(row) {
        resetOf${entity.functionName}();
        const _id = row.${idFiled} || idsOf${entity.functionName}.value
        viewOf${entity.functionName}(_id).then(response => {
            formOf${entity.functionName}.value = response.data;
            openOf${entity.functionName}.value = true;
            titleOf${entity.functionName}.value = "修改";
        });
    }

    /** 提交按钮 */
    function submitFormOf${entity.functionName}() {
        proxy.$refs["rulesOf${entity.functionName}"].clearValidate();

        proxy.$refs["rulesOf${entity.functionName}"].validate(valid => {
            if (valid) {
                if (formOf${entity.functionName}.value.${idFiled} != null) {
                    updateOf${entity.functionName}(formOf${entity.functionName}.value).then(response => {
                        proxy.$modal.msgSuccess("修改成功");
                        openOf${entity.functionName}.value = false;
                        getListOf${entity.functionName}();
                    });
                } else {
                    addOf${entity.functionName}(formOf${entity.functionName}.value).then(response => {
                        proxy.$modal.msgSuccess("新增成功");
                        openOf${entity.functionName}.value = false;
                        getListOf${entity.functionName}();
                    });
                }
            }
        });
    }

    /** 删除按钮操作 */
    function handleDeleteOf${entity.functionName}(row) {
        const _idsOf${entity.functionName} = row.${idFiled} || idsOf${entity.functionName}.value;
        proxy.$modal.confirm('是否确认删除  为"' + _idsOf${entity.functionName} + '"的数据项？').then(function () {
            return deleteOf${entity.functionName}(_idsOf${entity.functionName});
        }).then(() => {
            getListOf${entity.functionName}();
            proxy.$modal.msgSuccess("删除成功");
        }).catch(() => { });
    }

    /** 导出按钮操作 */
    function handleExportOf${entity.functionName}() {
        proxy.download('${url}/export', {
            ...queryParamsOf${entity.functionName}.value
        }, `${entity.functionName}_${r'${new Date().getTime()}'}.xlsx`)
    }

    <#list selectFile as f>
        function init_${f}(){
            ().then(res=>{${f}s.value=res.data});
        }
    </#list>

    getListOf${entity.functionName}();
</script>

<style>
    .inputClass{
        width: 230px;
    }
</style>